<template>
  <div>
    <el-dialog :title="title" :visible.sync="show" :close-on-click-modal="false" width="320px">
      <div class="reward-pay">
        <div class='reward-lab'>打赏金额为<b>{{payInfo.money}}</b>中亿币</div>
        <ul class='reward-type'>
          <!-- <li>
            <div @click="payType = 'alipay'" :class="{'on' : payType==='alipay'}">
              <img src="../../assets/icon_ZFB.png">
              支付宝支付
            </div>
          </li>
          <li>
            <div :class="{'on' : payType==='weixin'}">
              <img src="../../assets/icon_WX.png">
              微信支付
            </div>
          </li> -->
          <li>
            <div @click="payType = 'wallet'" :class="{'on' : payType==='wallet'}">
              <img src="../../assets/icon_QB.png">
              余额支付
            </div>
          </li>
        </ul>
        <div class="reward-submit">
          <button @click="submit()">立即支付</button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.reward-pay {
  margin-top: -20px;
  .reward-submit {
    text-align: center;
    padding-top: 20px;
    button {
      line-height: 32px;
      border-radius: 16px;
      background: #487aeb;
      color: #fff;
      padding: 0 20px;
      opacity: 0.9;
      &:hover{
        opacity: 1;
      }
    }
  }
  .reward-lab {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 30px;
    border-radius: 15px;
    text-align: center;
    background: #e4e4e4;
    b {
      font-size: 20px;
      color: #ed4014;
      padding: 0 3px;
    }
  }
  .reward-type {
    display: flex;
    list-style: none;
    margin: 0 -5px;
    & > li {
      width: 33.33%;
      padding: 5px;
      & > div {
        text-align: center;
        border: 1px solid #e4e4e4;
        padding: 10px 0;
        border-radius: 6px;
        cursor: pointer;
        &.on {
          border: 1px solid #487aeb;
          position: relative;
          &:before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: #487aeb;
            opacity: 0.15;
          }
        }
        img {
          display: block;
          margin: 0 auto;
        }
      }
    }
  }
}
</style>

<script>
import * as api from '@/service/api'
export default {
  props: {
    payInfo: Object,
    articleType: {
      type: String,
      default: 'viewpoint'
    }
  },
  data () {
    return {
      show: true,
      payType: 'wallet'
    }
  },
  watch: {
    show () {
      this.$emit('close')
    }
  },
  computed: {
    title () {
      return '打赏支付'
    }
  },
  methods: {
    async submit () {
      let fn = null
      let param = null
      if (this.articleType === 'viewpoint') {
        fn = api.viewpointReward
        param = {
          businessId: this.payInfo.viewPointId,
          payType: this.payType,
          amount: this.payInfo.money
        }
      } else {
        fn = api.planArticleReward
        param = {
          businessId: this.payInfo.articleId,
          payType: this.payType,
          amount: this.payInfo.money
        }
      }
      let res = await fn(param)
      if (this.payType === 'wallet') {
        window.layui.layer.msg('打赏成功')
        this.$emit('close')
      }
      if (res.data) {
        let str = res.data.replace(/\\"/g, '"')
        str = str.replace(/^<form/g, '<form target="_top"')
        console.log(str)
        window.document.write(str)
      }
    }
  }
}
</script>
